<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="500" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="所属小区" prop="communityId">
              <el-select v-model="form.communityId" placeholder="请选择所属小区" @change="getBuildingData">
                <el-option
                  v-for="dict in communityOptions"
                  :key="dict.id"
                  :label="dict.communityName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="所属楼栋" prop="floorId">
              <el-select v-model="form.floorId" placeholder="请选择所属楼栋" @change="getUnitList">
                <el-option
                  v-for="item in floorOptions"
                  :key="item.id"
                  :label="item.floorName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="所属单元" prop="unitId">
              <el-select v-model="form.unitId" placeholder="请选择所属单元" @change="getRoomListData">
                <el-option
                  v-for="item in unitOptions"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="所属房屋" prop="roomId">
              <el-select v-model="form.roomId" placeholder="请选择所属房屋" @change="changeRoom">
                <el-option
                  v-for="item in roomOptions"
                  :key="item.id"
                  :label="item.roomNum"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="收费项目" prop="chargeId" placeholder="请选择收费项目">
              <el-select v-model="form.chargeId" @change="changeItem">
                <el-option v-for="item in itemOptions"
                  :key="item.chargeId"
                  :label="item.chargeName"
                  :value="item.chargeId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="收费标准" prop="normId">
              <el-select v-model="form.normId" placeholder="请选择收费标准">
                <el-option v-for="item in normOptions"
                  :key="item.normId"
                  :label="item.normNames"
                  :value="item.normId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="计算费用到" prop="paymentCycle">
              <el-date-picker
                v-model="form.paymentCycle"
                type="month"
                value-format="yyyy-MM-dd"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {roomMixin} from "@/views/property/houseMange/roomMixin.js"
  import {listItem} from "@/api/payfee/item";
  import {listNorm} from "@/api/payfee/norm";
  import { computePayfee } from "@/api/payfee/tollCenter"

  export default {
    name: "computePayfee",  //计算费用
    mixins: [roomMixin],
    data() {
      return {
        title: '计算费用',
        open: false,
        form: {}, // 表单参数
        // 表单校验
        rules: {
          communityId: [
            {required: true, message: "小区信息不能为空", trigger: "blur"}
          ],
          chargeId: [
            {required: true, message: "收费项目不能为空", trigger: "blur"}
          ],
          normId: [
            {required: true, message: "收费标准不能为空", trigger: "blur"}
          ],
          paymentCycle: [
            {required: true, message: "计算费用截至日期不能为空", trigger: "blur"}
          ],
        },
        //收费项目字典
        itemOptions: [],
        //收费标准字典
        normOptions: [],
      }
    },
    created() {
      listItem({'projectIdIN': "'01','05'"}).then(res => {
        this.itemOptions = res.rows;
      })
    },
    methods: {
      show(options) {
        this.reset();
        this.initHouseInfo(options.currentNode)
        this.open = true
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityId: null,
          floorId: null,
          unitId: null,
          roomId: null,
          normId: null,
          chargeId: null,
          paymentCycle: null
        };
        this.resetForm("form");
      },
      changeItem(v) {
        if (!this.form.communityId) {
          this.msgWarning("请选择需要计算费用的小区")
          this.form.chargeId = null
          return;
        }
        this.normOptions = []
        listNorm({'chargeId': v, 'deptId': this.form.communityId}).then(res => {
          this.normOptions = res.rows;
        })
      },
      cancel(){
        this.open = false
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            computePayfee(this.form).then(res => {
              this.msgSuccess("计费成功")
              this.cancel()
              this.$emit("ok")
            })
          }
        })
      }

    }
  }
</script>

<style scoped>

</style>
